<template>
  <div v-if="playUrl && deviceId">
    <video-play :style="{width: '100%', height: '100%'}" :play-url="playUrl"></video-play>
  </div>
</template>

<script setup name="CameraIndex">
import { GET_RESTFUL } from '@/api';
import VideoPlay from "./Video.vue"

const props = defineProps({
  deviceId: {
    type: Number,
    default: null,
  },
})
const playUrl = ref('')
let keepLiveInterval = ref<String>("");

onMounted(() => {
  nextTick(() => {
    getPlayUrl()
  })
  keepLiveInterval = setInterval(()=>{
    GET_RESTFUL('keepLive',props.deviceId).then(resp=>{})
  },10*60*1000)
})

function getPlayUrl() {
  GET_RESTFUL('connect',props.deviceId).then(resp=>{
    playUrl.value = resp.msg
  })
}

function destroy(){
  keepLiveInterval && clearInterval(keepLiveInterval)
  keepLiveInterval = null
}

onActivated(()=>{
})

onDeactivated(()=>{

})

onBeforeUnmount(() => {
  destroy()
})
</script>

<style scoped lang="scss">

</style>